<template>
	<view class="">
		<view class=" ">
			<uni-section title="通栏卡片" type="line">
				<uni-card title="门店详情">
					<view style="width: 130rpx;height: 130rpx; float: left; ">
						<image :src="arr.store[0].storeLogo" style="width: 125rpx;height: 125rpx; float: left;" mode="">
						</image>
					</view>
					<view class="" style="float: left;   width: 360rpx; margin-left: 30px;">
						<text style="float: left; width: 400rpx;">{{arr.store[0].address}}</text>
						<!-- 	<text style="float: left; width: 400rpx;">{{j.creationTime}}</text> -->
						<text style="float: left; width: 400rpx;">{{arr.recyclingorder.creationTime}}</text>
					</view>
				</uni-card>
			</uni-section>
		</view>
		<view class="">
			<uni-section title="通栏卡片" type="line">
				<uni-card title="订单详情">

					<view class="" style="float: left;   width: 460rpx; ">
						<text style="float: left; width: 400rpx;">详细地址：{{arr.recyclingorder.address}}</text>
						<!-- 	<text style="float: left; width: 400rpx;">{{j.creationTime}}</text> -->
						<text style="float: left; width: 400rpx; margin-left: 28rpx;">
							联系人：{{arr.recyclingorder.contactsName}}</text>
						<text style="float: left; width: 400rpx;">联系电话：{{arr.recyclingorder.phone}}</text>
						<text style="float: left; width: 450rpx;">上门时间：{{arr.recyclingorder.getTime}}</text>
						<text style="float: left; width: 400rpx;">回收内容：{{arr.recyclingorder.content}}</text>
						<text style="float: left; width: 400rpx;">预计重量：{{arr.recyclingorder.weight}}KG</text>
						<text style="float: left; width: 400rpx; margin-left: 56rpx;">
							备注：{{arr.recyclingorder.remarks}}</text>
					</view>
				</uni-card>
			</uni-section>
		</view>
		
		<view class="">
			<u-tabbar :value="value1" @change="change1" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<u-tabbar-item text="" icon="../../static/img/微信图片_20220510202712.png" @click="click1"></u-tabbar-item>
				<u-tabbar-item text="" icon="../../static/img/微信图片_20220510202742.png" @click="click1"></u-tabbar-item>
				<u-tabbar-item text="取消订单"  style="background-color: #2BCDDD;" @click="show = true"></u-tabbar-item>
			</u-tabbar>
			<u-popup :show="show" mode="center"  @close="close" @open="open" round="5px" customStyle="width: 260px; height: 180px;">
			        <view style="margin-top: 10rpx; margin-left: 30rpx;">
						<text><h3 style="margin-top: 20rpx; margin-bottom: 10rpx;">订单取消</h3></text>
			            <text> 门店人员可能正忙，请确认是否
						取消订单或等待时间结束后自动
						取消订单。</text>
						<view class="" style="margin-top: 15rpx;">
						
							<u-button type="info" :plain="true" :hairline="false" style="width: 140rpx; height: 70rpx;  float: left; margin-left: 50rpx;" text="立即取消" @click="ljqx()"></u-button>
							<u-button  type="error" :plain="true" style="width: 140rpx; height: 70rpx;  float: left ; margin-left: 60rpx;"  text="暂不取消" @click="show = false"></u-button>
							
						</view>
			        </view>
				</u-popup>
		</view>
	</view>
</template>

<script>
	import request from '../../request.js'
	export default {
		data() {
			return {
					show: false,
				arr2: [],
				roId: '',
				arr: '',
				value1:'',
			}
		},
		onLoad(w) {
			this.roId = w.roId
			this.load()
		},
		methods: {
			ljqx(){
				this.show=false
				uni.showToast({
					title:'取消成功'
				});
				request({
					url:"xkuser/recyclingorder/qxdd/"+this.arr.recyclingorder.roId,
					method:'get',
					success:(res)=>{
						uni.showToast({
							title:'取消成功'
						});
					uni.reLaunch({
						url:'./user'
					})
					}
				});
			},
			load() {
				request({
					url: 'xkuser/recyclingorder/find/' + this.roId,
					method: 'get',
					success: (res) => {
						this.arr = res.data.data.data
						
						console.log(this.arr)
						
					}
				})
			}
		}
	}
</script>

<style>
</style>
